<script setup>
import { parseLyrics } from './api/requset';
import {ref, onMounted, computed, watch} from 'vue';
import MusicAudio from './components/MusicAudio.vue'
const list=ref()

console.log(list)
function handleTimeUpdate(event) {
  const currentTime =parseInt( event.target.currentTime);
  const index = lyrics.value.findIndex(item => item.timeStamp === currentTime);
  if (index>-1) {
   nowWord.value = index
   //console.log(nowWord.value)
  }
}
const lyrics = ref([]);
const nowWord=ref('')
const transformStyle=ref('')
watch(nowWord, (newVal, oldVal) => {
  console.log(newVal, oldVal)
  //console.log(list.value[newVal].offsetHeight)
  if(newVal==-1){
    nowWord.value=oldVal
  }else if(newVal>6){
    const moveDistance=-(newVal-6)*list.value[newVal].offsetHeight
    transformStyle.value=`transform:translateY(${moveDistance}px)`
  }
})
onMounted(async () => {
  lyrics.value=await parseLyrics();
  //console.log(lyrics.value)

})
const audio=ref()
function audioChange(index){
  //const audio=document.querySelector('audio')

  //console.log(audio)
  const timeStamp=lyrics.value[index].timeStamp
  audio.value.currentTime=timeStamp
  //nowWord.value=index
}
</script>

<template>
  <div class="wrapper">
    <audio src="../src/assets/music.mp3" controls @timeupdate="handleTimeUpdate" ref="audio"></audio>
    <div class="container">
    <div class="lyrics" :style="transformStyle">
      <div v-for="(item, index) in lyrics" 
      :key="index" 
      :class="{active: index === nowWord}"
      @click="audioChange(index)"
      ref="list">
        {{item.word}}
      </div>
    </div>
  </div>
  
  </div>
 
    

</template>

<style scoped>
  .wrapper {
    background: #000;
    color: #666;
    text-align: center;
    width: 100vw;
    height: 100vh;
    min-height: 600px;
  }
  audio{
    width: 500px;
    margin-bottom: 50px;
  }
  .container{
    height: 420px;
    overflow: hidden;
    }

    .lyrics{    
    transition: .5s;
    }
    .lyrics div{
      height: 30px;
    line-height: 30px;
    transition: .2s;
    cursor: pointer;
    }
    .lyrics div.active{
      color: #fff;
      
    }
</style>
